<div>
	<h2 data-translate="milkbeeApp.category.home.title">Categories</h2>
	<jhi-alert></jhi-alert>
	<br />
	<div class="table-responsive">
		<table class="jh-table table table-striped">
			<thead>
				<tr jh-sort="vm.predicate" ascending="vm.reverse"
					callback="vm.transition()">
					<th jh-sort-by="name"><span
						data-translate="milkbeeApp.category.name">Name</span> <span
						class="glyphicon glyphicon-sort"></span></th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="category in vm.categories track by category.id">
					<td><img style="display: inline-block;" class="img-circle"
					width="24px" height="24px"
					src="/content/images/upload/category/{{category.id}}.png" /> {{category.name}}</td>
					<td class="text-right">
						<div class="btn-group flex-btn-group-container">
							<button type="button" ngf-select="" ngf-pattern="'image/*'"
								accept="image/png" class="btn btn-primary btn-sm"
								ngf-change="vm.onfile($files,category.id)">
								<span class="glyphicon glyphicon-picture"></span> <span
									class="hidden-xs hidden-sm"
									data-translate="entity.action.uploadimage"></span>
							</button>

							<button type="submit" ng-click="vm.secede({id:category.id})"
								class="btn btn-danger btn-sm">
								<span class="glyphicon glyphicon-remove-circle"></span> <span
									class="hidden-xs hidden-sm"
									data-translate="entity.action.secede"></span>
							</button>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="text-center">
		<jhi-item-count page="vm.page" total="vm.queryCount"
			items-per-page="vm.itemsPerPage"></jhi-item-count>
		<uib-pagination class="pagination-sm" total-items="vm.totalItems"
			items-per-page="vm.itemsPerPage" ng-model="vm.page"
			ng-change="vm.transition()"></uib-pagination>
	</div>
</div>
